<template>
	<!-- 评论头部 -->
	<view class="parent_item" @click="gotoUserHome()">
		<!-- 头像 -->
		<u-avatar class="user_cover" :size="small?32:40" :src="userInfo.avatar" mode="aspectFill"></u-avatar>

		<view class="right_box">
			<view class="user_info">
				<text :class="small?'user_nick_small':'user_nick'">{{userInfo.displayName}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "commentator",
		props: {
			// 数据对象
			userInfo: {
				type: Object,
				default () {
					return {
						username: "",
						displayName: "",
						avatar: ""
					}
				}
			},
			// 小尺寸
			small: {
				type: Boolean,
				default () {
					return false
				}
			}

		},
		methods: {
			// 前往用户主页
			gotoUserHome() {
				uni.navigateTo({
					url: '/pages/center/homePage?id='+this.userInfo.username
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.parent_item {
		display: flex;
		flex: 1;
		flex-direction: row;
	}
	// 评论用户头像
	.user_cover {
		margin-left: -2px;
		margin-right: 10upx;
	}
	.right_box {
		display: flex;
		flex: 1;
		flex-direction: column;
		border-bottom-color: #f9f9f9;
		border-bottom-width: 1px;
		padding-bottom: 10px;
	}
	/* 评论者姓名/时间 */
	.user_info {
		flex-direction: row;
		align-items: center;
		flex: 1;
		display: flex;
	}
	// 评论者姓名
	.user_nick {
		font-size: 14px;
		color: #666666;
		font-weight: bold;
		line-height: 31px;
	}
	.user_nick_small {
		font-size: 12px;
		color: #666666;
		font-weight: bold;
		line-height: 31px;
	}



</style>
